<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>picture</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <style>
        * {margin: 0;padding: 0;}
        .content { width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;}
        #btn { width: 100px;height: 40px;}
        .img_wrap {width: 94%;display: none;height: auto;word-break: break-all;}
        .loading_pic { display: none;}
    </style>
    <script src="jquery-3.3.1.min.js"></script>
</head>

<body>
    <div class="content">
        <img class="loading_pic" src="loading.gif" width="100%" height="auto" alt="">
        <input id="upload" type="file" accept="image/*;" capture="camera">
        <img class="img_wrap" src="" alt="">
    </div>
</body>
<script>
    var demo_h5_upload_ops = {
        init: function () {
            this.eventBind();
        },
        eventBind: function () {
            var that = this;
            $("#upload").change(function () {
                var reader = new FileReader();
                reader.onload = function (e) {
                    that.compress(this.result);
                };
                reader.readAsDataURL(this.files[0]);
            });
        },
        compress: function (res) {
            var that = this;
            var img = new Image();
            img.onload = function () {
                var cvs = document.createElement('canvas'),
                    ctx = cvs.getContext('2d');
                cvs.width = img.width;
                cvs.height = img.height;
                ctx.clearRect(0, 0, cvs.width, cvs.height);
                ctx.drawImage(img, 0, 0, img.width, img.height);
                var dataUrl = cvs.toDataURL('image/jpeg', 1);
                $("#upload").hide();
                $('.loading_pic').show();
                that.upload(dataUrl);
            };
            img.src = res;
        },
        upload: function (image_data) {
            $.ajax({
                type: 'POST',
                url: "http://xxx/upload",
                data: { "base": image_data },
                success: function (res) {
                    $('.loading_pic').hide();
                    if (res.code == '200') {
                        $(".img_wrap").attr("src", "http://xxx/" + res.url);
                        $("#upload").hide();
                        $(".img_wrap").show();
                    } else {
                        $("#upload").show();
                        $(".img_wrap").hide();
                        alert(JSON.stringify(res.msg));
                    }
                },
                error: function (err) {
                    $('.loading_pic').hide();
                    $("#upload").show();
                    $(".img_wrap").hide();
                    alert(JSON.stringify(err));
                }

            });


            // $("#upload").hide();

        }
    };

    $(document).ready(function () {
        demo_h5_upload_ops.init();
    });
</script>

</html>